<template>
  <div class="box">
    <h3><span>|</span>订单统计</h3>
    <div class="view">
      <div class="content">
        <div>
          <p class="left">总</p>
        </div>
        <div class="right">
          <p class="text">总订单数</p>
          <p class="num">5697</p>
        </div>
      </div>
      <div class="content">
        <div>
          <p class="left2">支</p>
        </div>
        <div class="right">
          <p class="text">支付数</p>
          <p class="num">5697</p>
        </div>
      </div>
      <div class="content">
        <div>
          <p class="left3">退</p>
        </div>
        <div class="right">
          <p class="text">退款数</p>
          <p class="num">5697</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { orderdata ,orderdata2,orderdata3,deleteOrder,goodsList} from "@/api/userdata.js";
// orderdata()
//   .then((res) => {
//     console.log(res,"---order")
//   })
//   .catch((err) => {
//     console.log("error");
//   });


//   orderdata2()
//   .then((res) => {
//     console.log(res,"---order2")
//   })
//   .catch((err) => {
//     console.log("error");
//   });



//   orderdata3()
//   .then((res) => {
//     console.log(res,"---order3")
//   })
//   .catch((err) => {
//     console.log("error");
//   });



//   deleteOrder()
//   .then((res) => {
//     console.log(res,"--- deleteOrder")
//   })
//   .catch((err) => {
//     console.log("error");
//   });



// goodsList()
//   .then((res) => {
//     console.log(res,"--- goodsList")
//   })
//   .catch((err) => {
//     console.log("error");
//   });
</script>

<style lang="less" scoped>
.box {
  h3 {
    padding: 15px 0 0 30px;
    span {
      padding-right: 10px;
    }
  }
  .view {
    margin: 30px 0 0 30px;
    .content {
      display: flex;
      margin-bottom: 40px;
    }
    .left,
    .left2,
    .left3 {
      margin-right: 40px;
      height: 60px;
      width: 60px;
      border-radius: 50%;
      text-align: center;
      line-height: 60px;
      color: white;
      font-size: 30px;
    }
    .left {
      background-color: pink;
    }
    .left2 {
      background: rgb(224, 192, 231);
    }
    .left3 {
      background: rgb(96, 190, 227);
    }
    .right {
      .text {
        font-size: 20px;
        margin-bottom: 6px;
      }
      .num {
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
}
</style>
